<template>
  <el-drawer v-model="drawer" size="45%" :with-header="false">
    <el-descriptions title="订单详情" :column="1">
      <el-descriptions-item label="用户id：">{{ order.userId }}</el-descriptions-item>
      <el-descriptions-item label="创建时间：">{{ order.createTime }}</el-descriptions-item>
      <el-descriptions-item label="支付方式：">{{ order.payType }}</el-descriptions-item>
      <el-descriptions-item label="支付渠道：">{{ order.payChannel }}</el-descriptions-item>
      <el-descriptions-item label="备注：">{{ order.buyerMessage }}</el-descriptions-item>
      <el-descriptions-item label="状态：">{{ order.orderState }}</el-descriptions-item>
      <el-descriptions-item label="金额合计：">{{ order.totalMoney }}</el-descriptions-item>
      <el-descriptions-item label="数量合计：">{{ order.totalNum }}</el-descriptions-item>
      <el-descriptions-item label="收货人：">{{ order.receiver }}</el-descriptions-item>
      <el-descriptions-item label="联系方式：">{{ order.receiverContact }}</el-descriptions-item>
      <el-descriptions-item label="详细地址：">{{ order.receiverAddress }}</el-descriptions-item>
      <el-descriptions-item label="支付时间：">{{ order.payTime }}</el-descriptions-item>
      <el-descriptions-item label="支付结果：">{{ order.payResult }}</el-descriptions-item>
      <el-descriptions-item label="发货时间：">{{ order.consignTime }}</el-descriptions-item>
      <el-descriptions-item label="完成时间：">{{ order.endTime }}</el-descriptions-item>
      <el-descriptions-item label="关闭时间：">{{ order.closeTime }}</el-descriptions-item>

      <!-- 商品详情部分 -->
      <el-descriptions-item label="商品详情：">
        <!-- 使用 el-table 展示商品列表 -->
        <el-table :data="order.orderGoodsList" style="width: 100%">
          <el-table-column label="图片" width="80">
            <template #default="scope">
              <img :src="scope.row.picture" alt="商品图片" style="width: 50px; height: 50px;" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="规格" prop="attrsText"></el-table-column>
          <el-table-column label="价格 (元)" prop="price"></el-table-column>
          <el-table-column label="数量" prop="count"></el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";

const drawer = ref(false);
const order = ref([]);

const open = async (row) => {
  drawer.value = true;
  order.value = { ...row };
};

defineExpose({
  open,
});
</script>